<!--
 * @Author: tianhao
 * @Date: 2023-01-04 12:51:54
 * @LastEditTime: 2023-02-21 22:00:43
 * @LastEditors: tianhao
 * @Description: 
 * @FilePath: \dcollege\src\views\notice\notice.vue
 * 可以输入预定的版权声明、个性签名、空行等
-->
<template>
  <div class="top">
    <var-icon name="chevron-left" :size="30" class="ret" @click="fanHui()" />
    <div class="title1">公告详情</div>
    <var-space :size="[10, 10]">
      <var-button type="primary" round class="bt" @click="bottom = true">
        <svg
          t="1672808926699"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="6602"
          width="20"
          height="20"
        >
          <path
            d="M96 512m-96 0a96 96 0 1 0 192 0 96 96 0 1 0-192 0Z"
            fill="#ffffff"
            p-id="6603"
          ></path>
          <path
            d="M512 512m-96 0a96 96 0 1 0 192 0 96 96 0 1 0-192 0Z"
            fill="#ffffff"
            p-id="6604"
          ></path>
          <path
            d="M928 512m-96 0a96 96 0 1 0 192 0 96 96 0 1 0-192 0Z"
            fill="#ffffff"
            p-id="6605"
          ></path>
        </svg>
      </var-button>
    </var-space>
  </div>
  <div class="title2">山西农业大学</div>
  <div class="time">2023-01-04</div>
  <var-image src="./image/notice.png" class="img" />
  <div class="text">
    <!-- 真正的努力，从来都不动声色 <br />
    文/李三清 <br />
    大四上学期备战考研时，在图书馆自习室我认识了茉莉，一个笑起来有两个梨涡的女孩。得知我也在准备考研，莱莉很热情，要了我的联系方式，并约定一起晨读，背英语单词。我欣然接受。
   -->
   {{ noticeContent }}
  </div>
  <var-popup position="bottom" v-model:show="bottom">
    <div class="popup-example-block">
      <var-image src="./image/微信.png" class="weixin" />
      <div class="title3">微信聊天</div>
      <var-image src="./image/朋友圈.png" class="pyq" />
      <div class="title4">朋友圈</div>
      <var-image src="./image/微博.png" class="wb" />
      <div class="title5">微博</div>
      <var-divider margin="36px 0" />
      <svg
        t="1672812992557"
        class="icon1"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="7774"
        width="40"
        height="40"
      >
        <path
          d="M721.338182 350.859636a64.512 64.512 0 0 1 64.512 64.488728 64.512 64.512 0 0 1-129.000727 0 64.488727 64.488727 0 0 1 64.488727-64.488728zM495.592727 350.859636a64.465455 64.465455 0 1 1 0 128.977455 64.465455 64.465455 0 0 1 0-128.977455zM269.847273 350.859636a64.512 64.512 0 1 1 0 129.000728 64.512 64.512 0 0 1 0-129.000728z"
          fill="#8a8a8a"
          p-id="7775"
        ></path>
        <path
          d="M427.264 930.769455a32.116364 32.116364 0 0 1-28.299636-16.756364l-109.544728-192.069818a32.186182 32.186182 0 0 1 12.032-43.962182 32.116364 32.116364 0 0 1 43.962182 12.032l81.850182 143.429818 81.850182-143.429818c8.843636-15.499636 28.509091-20.945455 43.985454-12.032 15.476364 8.797091 20.852364 28.485818 12.032 43.962182l-109.568 192.069818a32.302545 32.302545 0 0 1-28.229818 16.756364h-0.069818z"
          fill="#8a8a8a"
          p-id="7776"
        ></path>
        <path
          d="M837.934545 737.024H540.439273c-17.826909 0-32.256-14.405818-32.256-32.256s14.429091-32.256 32.256-32.256h297.495272c42.146909 0 76.404364-32.814545 76.404364-73.146182V230.795636c0-40.308364-34.280727-73.076364-76.404364-73.076363H186.042182c-42.123636 0-76.381091 32.768-76.381091 73.076363v368.570182c0 40.308364 34.257455 73.146182 76.381091 73.146182h129.419636c17.826909 0 32.256 14.405818 32.256 32.256s-14.429091 32.256-32.256 32.256H186.042182c-77.684364 0-140.893091-61.719273-140.893091-137.634909V230.795636c0-75.869091 63.208727-137.588364 140.893091-137.588363h651.892363c77.684364 0 140.916364 61.719273 140.916364 137.588363v368.570182c0 75.938909-63.232 137.658182-140.916364 137.658182z"
          fill="#8a8a8a"
          p-id="7777"
        ></path>
      </svg>

      <svg
        t="1672812903674"
        class="icon"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="6493"
        width="40"
        height="40"
      >
        <path
          d="M516.297792 593.811532c-24.968122 0-45.331468-20.261017-45.331468-45.331468V299.208154c0-24.968122 20.261017-45.22914 45.331468-45.229139 25.070451 0 45.433796 20.261017 45.433796 45.229139v249.27191c-0.102328 25.070451-20.465674 45.331468-45.433796 45.331468zM516.297792 760.91376c-29.675227 0-53.824723-24.047167-53.824723-53.927051 0-29.572899 24.149495-53.824723 53.824723-53.824722 29.777556 0 53.824723 24.149495 53.824722 53.824722-0.102328 29.777556-24.149495 53.927051-53.824722 53.927051z"
          fill="#8a8a8a"
          p-id="6494"
        ></path>
        <path
          d="M516.093135 949.607275c-243.439193 0-441.546917-198.107725-441.546917-441.546917S272.653942 66.513441 516.093135 66.513441s441.546917 198.107725 441.546917 441.546917-198.107725 441.546917-441.546917 441.546917z m0-827.938843c-213.047667 0-386.391926 173.344259-386.391926 386.391926 0 213.047667 173.344259 386.391926 386.391926 386.391925 213.047667 0 386.391926-173.344259 386.391925-386.391925 0-213.047667-173.344259-386.391926-386.391925-386.391926z"
          fill="#8a8a8a"
          p-id="6495"
        ></path>
      </svg>

      <svg
        t="1672812679666"
        class="icon"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="4113"
        width="40"
        height="40"
      >
        <path
          d="M910.496 213.536C804.16 82.208 611.488 61.952 480.128 168.32l-100.768 81.6 50.336 62.176 100.768-81.6a225.984 225.984 0 1 1 284.448 351.264l-107.968 87.424 50.336 62.176 107.968-87.424a305.984 305.984 0 0 0 45.248-430.4zM516.352 823.552a225.984 225.984 0 1 1-284.448-351.264l110.976-89.856-50.336-62.176-110.976 89.856C50.24 516.448 29.984 709.152 136.32 840.48c106.336 131.328 299.04 151.584 430.368 45.248l105.12-85.12-50.336-62.176-105.12 85.12z"
          p-id="4114"
          fill="#8a8a8a"
        ></path>
        <path
          d="M676.16 353.28l51.232 61.44-343.552 286.304-51.2-61.44z"
          p-id="4115"
          fill="#8a8a8a"
        ></path>
      </svg>

      <svg
        t="1672812709926"
        class="icon"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="5224"
        width="40"
        height="40"
      >
        <path
          d="M736.1792 456.704c-19.92704-11.52512-44.48256-11.52512-64.40448 0s-32.19968 32.82432-32.19968 55.87456 12.27264 44.34944 32.19968 55.86944c19.92704 11.52512 44.48256 11.52512 64.40448 0 19.93216-11.52 32.19968-32.8192 32.19968-55.86944S756.11136 468.22912 736.1792 456.704z"
          fill="#8a8a8a"
          p-id="5225"
        ></path>
        <path
          d="M997.71904 357.7088c-10.9312-34.4064-25.1904-67.37408-43.18208-98.6624-12.16512-21.15584-40.35072-22.93248-54.0416-3.39968-8.56064 12.20096-7.19872 24.61184-0.19968 37.36064 59.61216 108.55424 74.09152 223.05792 40.13056 342.07744-68.73088 240.91648-318.67904 377.15456-558.4128 305.82784-175.66208-52.25472-303.3344-211.02592-316.88192-394.368-5.53984-74.97728 6.90688-146.90816 36.8896-215.91552 82.54976-189.9776 293.2224-299.58656 495.7696-257.8176 46.5664 9.6 90.61888 25.79968 131.99872 49.2544 7.08608 4.00896 14.40768 6.69184 22.68672 5.41184 13.91104-2.15552 24.73472-12.30336 27.22816-25.43104 2.7392-14.39232-3.70176-27.47392-17.72544-35.25632C647.23456 3.03616 525.46048-15.55456 397.50656 13.0816 165.39136 65.02912 0.05632 273.18272 0 511.65184c-0.00512 38.14912 4.0192 75.87328 12.42112 113.06496 65.00864 287.8208 359.52128 461.42976 642.048 378.55232 199.6288-58.56256 343.83872-232.51456 364.79488-440.70912C1026.2784 492.88704 1018.94144 424.51456 997.71904 357.7088z"
          fill="#8a8a8a"
          p-id="5226"
        ></path>
        <path
          d="M478.62784 456.704c-19.92704 11.52512-32.2048 32.82432-32.2048 55.87456 0 35.63008 28.83584 64.51712 64.40448 64.51712s64.40448-28.88704 64.40448-64.51712c0-23.05024-12.27264-44.34944-32.2048-55.87456C523.10528 445.17888 498.55488 445.17888 478.62784 456.704z"
          fill="#8a8a8a"
          p-id="5227"
        ></path>
        <path
          d="M285.60896 456.704c-19.92704 11.52512-32.2048 32.82432-32.2048 55.87456s12.27264 44.34944 32.2048 55.86944c19.92704 11.52512 44.47744 11.52512 64.40448 0 19.92704-11.52 32.19968-32.8192 32.19968-55.86944s-12.27264-44.34944-32.19968-55.87456C330.0864 445.17888 305.53088 445.17888 285.60896 456.704z"
          fill="#8a8a8a"
          p-id="5228"
        ></path>
      </svg>
      <div class="sub1">分享到消息</div>
      <div class="sub2">投诉</div>
      <div class="sub3">复制链接</div>
      <div class="sub4">其他</div>
      <var-divider margin="36px 0" />
      <div class="bt2" @click="bottom = false">取消</div>
    </div>
  </var-popup>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { useRouter } from "vue-router";
import {useUserNoticeStore} from '@/stores/noticedetails'
import { storeToRefs } from 'pinia';
const router = useRouter();
const userNoticeStore = useUserNoticeStore()
const { userNotice } = userNoticeStore
const { noticeContent } = storeToRefs(userNoticeStore)

const bottom = ref(false);
userNotice();

const content = ref("");
function fanHui() {
  router.go(-1);
}
</script>

<style lang="less" scoped>
.top {
  width: 100%;
  height: 60px;
  border-bottom: none;
}
.ret {
  float: left;
  margin-top: 30px;
}

.title1 {
  font-size: 20px;
  position: absolute;
  margin-top: 30px;
  margin-left: 150px;
  font-weight: bold;
}
.bt {
  margin-top: 25px;
  margin-left: 320px;
}
.title2 {
  margin: 20px auto auto 10px;
  font-size: 20px;
  font-weight: bold;
}
.time {
  font-size: 15px;
  margin: 23px auto auto 10px;
  color: rgb(180, 178, 178);
}
.img {
  margin: 10px 6px;
}
.text {
  margin: 10px;
  height: 200px;
}
.popup-example-block {
  padding: 20px 24px;
  width: 100%;
  height: 300px;
  .img {
    width: 40px;
    height: 40px;
    margin: 10px;
  }
  .weixin {
    width: 50px;
    height: 50px;
    position: absolute;
    border-radius: 10px;
    border: 1px gray solid;
    margin: 10px;
  }
  .pyq {
    width: 50px;
    height: 50px;
    position: absolute;
    border-radius: 10px;
    border: 1px gray solid;
    margin: 10px auto auto 100px;
  }
  .wb {
    width: 50px;
    height: 50px;
    border-radius: 10px;
    border: 1px gray solid;
    margin: 10px auto auto 190px;
  }
  .title3 {
    position: absolute;
    margin: 60px auto auto 0px;
  }
  .title4 {
    position: absolute;
    margin: 60px auto auto 100px;
  }
  .title5 {
    position: absolute;
    margin-left: 198px;
  }
  .icon1 {
    margin-left: 10px;
  }
  .icon {
    margin-left: 50px;
  }
  .sub1 {
    float: left;
    margin-left: -10px;
  }
  .sub2 {
    position: absolute;
    margin-left: 104px;
  }
  .sub3 {
    position: absolute;
    margin-left: 180px;
  }
  .sub4 {
    position: absolute;
    margin-left: 285px;
  }
  .bt2 {
    width: 350px;
    height: 50px;
    position: absolute;
    margin-top: -25px;
    font-size: 20px;
    font-weight: bold;
    margin-left: 145px;
  }
}
</style>
